<!-- //文章资讯 -->
<template>
	<view class="txtConsult">
		<!-- 投稿悬浮窗 S-->
		<view  class="nanbar-box " style="text-align: center;" @click="pageJumps('/pagesSecond/strategy/writeTxt')">
			<view class="center_combo">
				<image class="tp-img36" style="margin: 15rpx 0 0 0;"  src="../static/imgs/icons/fabu.png" mode=""></image>
			</view>
			<text class=" tp-fcF" style="font-size: 20rpx;margin: 0;">发布文章</text>
		</view>
		<!-- 悬浮窗 E-->
		<!-- 咨询头部 S -->
		<view class="txtConsult_head">
			<view class="txtConsult_head_bj">
				<image src="./static/zixun-bg.png" mode="aspectFill" ></image>
			</view>
			<view class="txtConsult_head_main">
				<view class="txtConsult_head_main_top flex flex_between">
					<view class="txtConsult_head_main_img flex align_center flex_center">
						<image :src="mymessage.avater" mode="aspectFill" @click="handleChooseImg"></image>
						<text>{{mymessage.name}}</text>
					</view>
					<navigator hover-class="none" url="/pagesUser/articleEdit">
						<view class="txtConsult_head_main_brn flex align_center flex_center">编辑</view>
					</navigator>
				</view>
				<view class="txtConsult_head_main_txt" v-if="mymessage.intro">{{mymessage.intro}}</view>
				<view class="txtConsult_head_main_txt" v-else>来编辑您的个人简介吧!</view>
			</view>
		</view>
		<!-- 咨询头部 E -->
		<!-- 咨询内容 S -->
		<view class="txtConsult_main">
			<!-- 头部导航 -->
			<view class="txtConsult_main_head flex">
				<view class="txtConsult_main_head_li flex align_center flex_center" v-for="(item,index) in 2" :key="index" :class="{active:active == index+1}" @click="change(item,index)">
					<template v-if="index == 1">
						<text>我的投稿</text>
						<text v-if="tgnum">({{tgnum}})</text>
					</template>
					<template v-else>
						<text>文章资讯</text>
						<text v-if="wznum">({{wznum}})</text>
					</template>
				</view>
			</view>
			<!-- 二级导航 -->
			<view class="txtConsult_main_nav flex">
				<view class="txtConsult_main_nav_li flex align_center flex_center" v-for="(item,index) in 3" :key="index" :class="{active:showtype == index}" @click="shtype(item,index)">
					<template v-if="index == 0">审核中</template>
					<template v-else-if="index == 1">审核成功</template>
					<template v-else>审核失败</template>
				</view>
			</view>
			<!-- 列表 -->
			<!-- <view class="txtConsult_main_list" v-if="index == 0">
				<view class="txtConsult_main_list_li" v-for="(item,index) in 5" :key="index">
					<view class="txtConsult_main_list_title">西藏旅游攻略活动征文西藏旅游攻略活动征文dqwdq</view>
					<view class="txtConsult_main_list_con flex align_center">
						<view class="txtConsult_main_list_con_img"></view>
						<view class="txtConsult_main_list_con_txt">西藏旅游攻略活动征文西藏旅游攻略活动征文</view>
					</view>
					<view class="txtConsult_main_list_time flex align_center flex_between">
						<view class="txtConsult_main_list_time_l">2020-07-28 10:24</view>
					</view>
				</view>
			</view> -->
				<!-- 文章列表 S-->
			<view class="txtConsult_main_list" v-if="active==1">
				<view class="txtConsult_main_lists_li txtConsult_main_list_li" v-for="(item,index) in list" :key="index" @click="pageJumps('/pagesSecond/strategy/strategyMessage?id=' + item.id)">
					<!-- <view class="dot flex align_center flex_center">6</view> -->
					<view class="txtConsult_main_list_title">{{item.name}}</view>
					<view class="txtConsult_main_list_time flex align_center flex_between">
						<view class="txtConsult_main_list_time_l">{{item.time}}</view>
						<!-- <view class="txtConsult_main_list_time_r flex align_center">
							<image src="" mode=""></image>
							<text>64512</text>
						</view> -->
					</view>
				</view>
				
			</view>
			<!-- 文章列表 E-->
			<!-- 投稿列表 S-->
			<view class="txtConsult_main_list" v-if="active==2">
				<view class="txtConsult_main_lists_li txtConsult_main_list_li" v-for="(item,index) in list" :key="index" @click="pageJumps('/pagesSecond/strategy/strategyHdgjdetail?id=' + item.id)">
					<view class="txtConsult_main_list_title">{{item.name}}</view>
					<!-- <view class="dasangjf tp-ptb0lr20 flex align_center flex_between">
						<view class="flex align_center flex_start">
							<image class="tp-img64 tp-mr20" src="../static/imgs/icons/word.png" mode=""></image>
							<text class="tp-mr10 tp-fz28">得票数:</text>
							<text class="tp-fz28">56</text>
						</view>
						<view class="lookthis tp-fz24 tp-tc" @click="open">
							<text style="">查看</text>
						</view>
					</view> -->
					<view class="txtConsult_main_list_time flex align_center flex_between">
						<view class="txtConsult_main_list_time_l">{{item.time}}</view>
						<view class="">
							<!-- <text class="tp-mr10 tp-fz28">得票数:</text>
							<text class="tp-fz28">56</text> -->
						</view>
					</view>
				</view>
				
			</view>
			<!-- 投稿列表 E-->
		</view>
		<!-- 咨询内容 E -->
		<view class="nodata" v-if="!list.length">这里还木有数据哈~~</view>
	</view>
</template>

<script> 
	export default {
		data() {
			return {
				active:1,//切换 1文章2投稿
				showtype:0,//页面选中审核状态 0审核中 1 成功 2 失败
				mymessage:{},//用户信息
				wznum:'',//文章的数量
				tgnum:'',//投稿的数量
				pageNum: 1, // 当前页码,请设置初始值
				pageSize: 10, // 每页显示数量,请设置初始值
				last_page: null, // 总页数
				list: [],//列表
				loadMoreText: "加载中...",
				showLoadMore: false, // 加载更多
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getmyMessage()
			this.getlist()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pageNum = 1
			this.last_page = null
			this.getmyMessage()
			this.getlist()
		},
		// 上拉触底
		 onReachBottom() {
				if (this.pageNum < this.last_page) {
					this.showLoadMore = true;
					this.pageNum++
					this.getlist()
				}
		}, 
		methods:{
			handleChooseImg() {
				console.log(1111)
				let _this = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: ({tempFilePaths}) => {
						uni.uploadFile({
							url: _this.$baseUrl + _this.$api.uploadFile,
							filePath: tempFilePaths[0],
							name: 'file',
							// formData: {
							// 	'user': 'test'
							// },
							success: (uploadFileRes) => {
								let uploadData = JSON.parse(uploadFileRes.data)
								console.log('uploadData',uploadData)
								_this.$http.get(_this.$api.EditAvatar, {avater: uploadData.url}).then(res => {
									if (res.code === 200) {
										_this.getmyMessage()
									}
								})
							}
						})
					}
				});
			},
			//获取头像昵称
			getmyMessage(){
				this.$http.get(this.$api.articleCustomerIndex).then(res => {
					uni.stopPullDownRefresh();
					if(res.code ==200){
						if (!res.data.avater.startsWith('http')) {
							res.data.avater = this.$imgUrl + res.data.avater
						}
						this.mymessage = res.data
						console.log(this.mymessage)
					}
				})
			},
			//切换文章和投稿
			change(item,index){
				console.log('触发了切换')
				this.active = index+1
				this.showtype = 0
				this.pageNum = 1
				this.last_page = null
				this.getlist()
			},
			//切换审核状态
			shtype(item,index){
				console.log('触发了审核状态切换')
				this.showtype = index
				this.getlist()
			},
			//获取旅游攻略列表S--
			getlist() {
				this.$http.get(this.$api.articleList + '?type=' + this.active + '&status=' + this.showtype + '&pageNum=' + this.pageNum + '&pageSize=' + this.pageSize).then(
					res => {
						uni.stopPullDownRefresh();
						this.showLoadMore = false;
						if (res.code == 200) {
							if(this.active==1){
								this.wznum = res.data.total
							}if(this.active==2){
								this.tgnum = res.data.total
								}
							this.last_page = res.data.pageTotal
							
							if (this.pageNum > 1) {
								this.list = this.list.concat(res.data.result);
							} else {
								this.list = res.data.result
							} 
						}
					})
			},
			//获取旅游攻略列表E--
		},
		
	}
</script>

<style lang="scss" scoped>
	.nodata {
		text-align: center;
		margin: 100rpx auto;
	}
	//悬浮窗
	.nanbar-box {
		position: fixed;
		top: 80%;
		right: 10rpx;
		width: 100rpx;
		height: 100rpx;
		background: #000000;
		opacity: 0.5;
		border-radius: 50%;
		z-index: 10;
	}
	//投稿样式
	.dasangjf {
		margin: 0 30rpx 0rpx 0rpx;
		width: 690rpx;
		height: 88rpx;
		background: #F5F5F5;
		border-radius: 8rpx;
		line-height: 88rpx;
		box-sizing: border-box;
	
		.lookthis {
			width: 88rpx;
			height: 40rpx;
			background: #FFFFFF;
			border: 2rpx solid #00B4FF;
			border-radius: 4rpx;
			color: #00B4FF;
			line-height: 40rpx;
		}
	}
// 咨询头部
.txtConsult_head {
	margin-bottom: 20rpx;
	.txtConsult_head_bj {
		height: 280rpx;
	}
	.txtConsult_head_main {
		margin-top: -20rpx;
		padding: 16rpx 30rpx 40rpx 30rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		position: relative;
		.txtConsult_head_main_top {
			height: 120rpx;
			.txtConsult_head_main_img {
				position: relative;
				padding-left: 140rpx;
				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					position: absolute;
					top: -40rpx;
					left: 0rpx;
				}
				text {
					font-size: 30rpx;
					margin-bottom: 60rpx;
				}
			}
			.txtConsult_head_main_brn {
				width: 200rpx;
				height: 54rpx;
				background: #FFAF3C;
				border-radius: 4rpx;
				color: #FFFFFF;
				font-size: 30rpx;
			}
		}
	}
}
// 咨询内容
.txtConsult_main {
	.txtConsult_main_head {
		background: #FFFFFF;
		.txtConsult_main_head_li {
			height: 88rpx;
			width: 50%;
			text {
				color: #666666;
				&:first-child {
					font-size: 32rpx;
				}
			}
		}
		.active {
			text {
				color: #FD7903;
			}
		}
	}
	// 二级
	.txtConsult_main_nav {
		margin-top: 1rpx;
		background: #FFFFFF;
		.txtConsult_main_nav_li {
			flex: 1;
			color: #666666;
			font-size: 28rpx;
			height: 80rpx;
		}
		.active {
			color: #FD7903;
		}
	}
	// 列表
	.txtConsult_main_list {
		padding-left: 30rpx;
		margin-top: 2rpx;
		background: #FFFFFF;
		.txtConsult_main_list_li {
			position: relative;
			padding: 30rpx 30rpx 30rpx 0;
			border-bottom: 2rpx solid #EBEBEB;
			&:last-child {
				border-bottom: none;
			}
			.dot {
				position: absolute;
				top: 17rpx;
				right: 30rpx;
				width: 24rpx;
				height: 24rpx;
				background: #FF4A37;
				border-radius: 50%;
				color: #FFFFFF;
				font-size: 22rpx;
			}
			.txtConsult_main_list_title {
				font-size: 26rpx;
			}
			.txtConsult_main_list_con {
				margin: 20rpx 0;
				.txtConsult_main_list_con_img {
					width: 64rpx;
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}
			}
			.txtConsult_main_list_time {
				.txtConsult_main_list_time_l {
					color: #999999;
					font-size: 22rpx;
				}
				.txtConsult_main_list_time_r {
					image {
						width: 24rpx;
						height: 17rpx;
						margin-right: 10rpx;
					}
					text {
						color: #999999;
						font-size: 22rpx;
					}
				}
			}
		}
		.txtConsult_main_lists_li {
			.txtConsult_main_list_title {
				margin-bottom: 20rpx;
			}
		}
	}
}
</style>
